嗨,第7天,說明完requests
之後,來說明HTML
吧。
HTML 是一種標記語言(markup language),非一般的程式設計語言。它告訴瀏覽器該如何呈現網頁HTML,含了一系列的元素(elements),而元素包含了標籤(tags)與內容(content)。
舉例來說:
<p class="hello-title"> hello world </p>
起始標籤
: \<p\>
結束標籤
: <\/p\>
內容
: hello world
屬性
: class="hello-title"
屬性(Attribute)
不會呈現在網頁上,但可以透過屬性提供更多的資訊幫助我們編輯網頁的呈現,包含:
=
符號HTML 主要架構:
<!DOCTYPE html>
: 文件類型(doctype)<html></html>
: <html>
元素為根元素包含了所有顯示在該網頁面的內容。<head></head>
: 裡面放的是你想涵括的重要資訊,但不會顯示於網頁上的。<body></body>
: 包含所有會顯示於網頁瀏覽者眼前的內容。<title></title>
: 呈現於網頁瀏覽者眼前的網頁標題。以下是一個HTML
範例:
<!DOCTYPE html>
<html>
<head>
<title>The Dormouse's story</title>
</head>
<body>
<p class="title"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie" class="sister" id="link1">Elsie</a>,
<a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> and
<a href="http://example.com/tillie" class="sister" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>
<p class="story">...</p>
</body>
</html>
巢狀
,以上面範例來說可以看到<head>
與<body>
為同一層,而<head>
與<body>
內又分別包覆了<title>
與<p>
,而<p>
內又包覆了<a>
元素。該怎麼看?只要看標籤的起始標籤
與結束標籤
,裡面所包覆的就為子元素。
<p class="story">
和</p>
中間就包含了三個</a>
元素,這三個<a>
元素便是<p class="story">
的子元素。要如何看網頁的HTML
?在昨天我們有透過Requests
得到HTML
內容,又是取得哪些內容?我們可以在網畫面點擊右鍵
>檢查
:
現在來看一下裡面元素吧,對標題Python 3.0 Release | Python.org
點右鍵檢查,可以看到標題內容是在<h3>
且class="LC20lb"
的元素內,明天開始會介紹如何取得裡面的內容。
JS
渲染過的,要怎麼知道沒有JS
渲染的畫面會是怎樣呢?Chrome瀏覽器
,可以到網頁設定關掉JS
(如圖):封鎖
之後所看到的內容就是沒有經過渲染的網頁內容才是實際抓到的內容:
會發現標題跟網頁連結其實都是在<a>
標籤內!那接下來該用什麼工具解析它得到我們要的內容,就明天再介紹啦!